import { Alert, Authenticator, Tabs } from '@aws-amplify/ui-react';
import { Example } from '@/components/Example';
import { InlineFilter } from '@/components/InlineFilter';

<Alert role="none" heading="Zero Configuration">

The Authenticator [automatically infers](/connected-components/authenticator#step-1-configure-backend) `loginMechanisms` from the current Amplify configuration, 
but can be explicitly defined as seen below.

</Alert>

Without the zero configuration, the Authenticator by default creates new users in the Amazon Cognito UserPool based on a unique `username`.

You can provide an alternative to `username` such as `email` or `phone_number`.

> **Note**: A `username`, `email`, or `phone_number` value is required for Cognito User Pools. The `username` field will only work with Gen 1 Auth. For more information about using `username` see the [docs](https://docs.amplify.aws/react/build-a-backend/auth/concepts/usernames/).

<Tabs.Container defaultValue="Email">
  <Tabs.List>
    <Tabs.Item value="Email">Email</Tabs.Item>
    <Tabs.Item value="Phone Number">Phone Number</Tabs.Item>
    <Tabs.Item value="Username">Username</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="Username">
    Note: Login with Username is not currently supported using Amplify Gen2 backends

    <InlineFilter filters={['angular']}>
      ```html{1}
      <amplify-authenticator [loginMechanisms]="['username']">
        <ng-template
          amplifySlot="authenticated"
          let-user="user"
          let-signOut="signOut"
        >
          <h2>Welcome, {{ user.username }}!</h2>
          <button (click)="signOut()">Sign Out</button>
        </ng-template>
      </amplify-authenticator>
      ```
    </InlineFilter>
    <InlineFilter filters={['react']}>
      ```js{3}
      <Authenticator loginMechanisms={['username']}>
        {({ signOut, user }) => (
          <main>
            <h1>Hello {user.username}</h1>
            <button onClick={signOut}>Sign out</button>
          </main>
        )}
      </Authenticator>
      ```
    </InlineFilter>
    <InlineFilter filters={['vue']}>
      ```html{2}
      <template>
        <authenticator :login-mechanisms="['username']">
          <template v-slot="{ user, signOut }">
            <h1>Hello {{ user.username }}!</h1>
            <button @click="signOut">Sign Out</button>
          </template>
        </authenticator>
      </template>
      ```
    </InlineFilter>
    <InlineFilter filters={['svelte']}>
      ```html{1}
        <Authenticator loginMechanisms={['username']}>
          {#snippet children({ user, signOut })}
            <h1>Hello {user.username}!</h1>
            <button onclick={signOut}>Sign Out</button>
          {/snippet}
        </Authenticator>
      ```
    </InlineFilter>
    <Example>
      <Authenticator />
    </Example>
  </Tabs.Panel>
  <Tabs.Panel value="Email">
    <InlineFilter filters={['angular']}>
      ```html{1}
      <amplify-authenticator [loginMechanisms]="['email']">
        <ng-template
          amplifySlot="authenticated"
          let-user="user"
          let-signOut="signOut"
        >
          <h2>Welcome, {{ user.username }}!</h2>
          <button (click)="signOut()">Sign Out</button>
        </ng-template>
      </amplify-authenticator>
      ```
    </InlineFilter>
    <InlineFilter filters={['react']}>
      ```js{3}
      <Authenticator loginMechanisms={['email']}>
        {({ signOut, user }) => (
          <main>
            <h1>Hello {user.username}</h1>
            <button onClick={signOut}>Sign out</button>
          </main>
        )}
      </Authenticator>
      ```
    </InlineFilter>
    <InlineFilter filters={['vue']}>
      ```html{2}
      <template>
        <authenticator :login-mechanisms="['email']">
          <template v-slot="{ user, signOut }">
            <h1>Hello {{ user.username }}!</h1>
            <button @click="signOut">Sign Out</button>
          </template>
        </authenticator>
      </template>
      ```
    </InlineFilter>
    <InlineFilter filters={['svelte']}>
      ```html{1}
        <Authenticator loginMechanisms={['email']}>
          {#snippet children({ user, signOut })}
            <h1>Hello {user.username}!</h1>
            <button onclick={signOut}>Sign Out</button>
          {/snippet}
        </Authenticator>
      ```
    </InlineFilter>
    <Example>
      <Authenticator loginMechanisms={['email']} />
    </Example>
  </Tabs.Panel>
  <Tabs.Panel value="Phone Number">
    <InlineFilter filters={['angular']}>
      ```html{1}
      <amplify-authenticator [loginMechanisms]="['phone_number']">
        <ng-template
          amplifySlot="authenticated"
          let-user="user"
          let-signOut="signOut"
        >
          <h2>Welcome, {{ user.username }}!</h2>
          <button (click)="signOut()">Sign Out</button>
        </ng-template>
      </amplify-authenticator>
      ```
    </InlineFilter>
    <InlineFilter filters={['react']}>
      ```js{3}
      <Authenticator loginMechanisms={['phone_number']}>
        {({ signOut, user }) => (
          <main>
            <h1>Hello {user.username}</h1>
            <button onClick={signOut}>Sign out</button>
          </main>
        )}
      </Authenticator>
      ```
    </InlineFilter>
    <InlineFilter filters={['vue']}>
      ```html{2}
      <template>
        <authenticator :login-mechanisms="['phone_number']">
          <template v-slot="{ user, signOut }">
            <h1>Hello {{ user.username }}!</h1>
            <button @click="signOut">Sign Out</button>
          </template>
        </authenticator>
      </template>
      ```
    </InlineFilter>
    <InlineFilter filters={['svelte']}>
      ```html{1}
        <Authenticator loginMechanisms={['phone_number']}>
          {#snippet children({ user, signOut })}
            <h1>Hello {user.username}!</h1>
            <button onclick={signOut}>Sign Out</button>
          {/snippet}
        </Authenticator>
      ```
    </InlineFilter>
    <Example>
      <Authenticator loginMechanisms={['phone_number']} />
    </Example>
  </Tabs.Panel>
</Tabs.Container>
